<template>
  <view
    class="container"
    @click="closeModal"
    @touchmove.stop="handle"
    v-if="loginShow && !isLogin"
  >
    <view
      class="content animate__animated animate__fadeInUp"
      @click.stop="handle"
    >
      <!-- <view class="content-intro">
        <view class="content-intro-img">
          <u-image
						class="avatar-image"
						shape="circle"
						width="140rpx"
						height="140rpx"
						:fade="false"
						:loading="false"
						src="https://qiniu-res.jintianwang.cc/20221105222247-avatar.png">
					</u-image>
        </view>
      </view> -->
      <view class="content-bottom">
        <view class="tips">
          <text>您暂未加入到创作者平台，很多功能受到限制，立即前往成为创作者。</text>
        </view>
        <u-button
          open-type="getUserInfo"
          :custom-style="{
            'backgroundColor': '#56d39d',
            'color': '#fff',
            'fontWeight': '700',
            'width': '100%'
          }"
          type="primary"
          class="content-bottom-btn"
          @click="goMerchant"
        >
          成为创作者
        </u-button>
      </view>
      <view class="content-agree" @click="goAgreement">玩法介绍</view>
    </view>
  </view>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
import { updateUserInfo, getUserInfoById } from "@/api/user";
function getCurrentPageUrlWithArgs() {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const url = currentPage.route;
  const options = currentPage.options;
  const urlWithArgs =
    `/${url}?` +
    Object.keys(options)
      .map((key) => `${key}=${options[key]}`)
      .join("&");
  return urlWithArgs;
}
export default {
  name: "login",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      loginShow: (state) => {
        return state.loginShow;
      },
    }),
    ...mapGetters(['isLogin', 'appletInfo', 'userInfo']),
  },
  methods: {
    ...mapActions(["setUserData", "getLoginStatus"]),
    handle() {
      return;
    },
    closeModal() {
      this.$store.dispatch('setShowLogin', false);
    },
    /**
     * 获取token，以及用户信息
     */
    async goMerchant() {
      uni.navigateTo({
        url: '/pages/merchant/merchant'
      })
    },

    // 前往用户协议
    goAgreement() {
      uni.navigateTo({
        url: '/pages/play/index'
      })
    }
  },
};
</script>
<style lang="scss">
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(000, 000, 000, 0.5);
  z-index: 1001;
}
.content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  height: 460rpx;
  width: 80%;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 16rpx;
  --animate-duration: 0.5s;
  &-intro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-size: 30rpx;
    color: #666666;
    &-img {
      margin-top: 30rpx;
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      overflow: hidden;
      background: $uni-color-primary2;
    }
    &-tips {
      margin-top: 20rpx;
      line-height: 72rpx;
      text-align: center;
    }
  }
  &-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 24rpx;
    margin: 40rpx 0 60rpx;
    &-btn {
      width: 100%;
      border-radius: 50rem !important;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      &-img {
        width: 36rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }
    }
  }
  &-agree {
    padding-bottom: calc(env(safe-area-inset-bottom));
    font-size: 26rpx;
    text-align: center;
    color: #919293;
  }
  .tips{
    padding: 32rpx 0;
  }
}
.avatar-image{
  width: 140rpx;
  height: 140rpx;
  margin: auto;
}
</style>